﻿/**
* Created by JetBrains PhpStorm.
* User: demon
* Date: 12-4-3
* Time: 上午10:05
* To change this template use File | Settings | File Templates.
*/
function avatar(options) {
    this.bigImg = $(options.bigImg); //大图容器
    this.midImg = $(options.midImg);
    this.smallImg = $(options.smallImg);
    this.zoom = $(options.zoom) || "";
    this.zoomWidth = 102;
    this.zoomHeight = 102;
    this.bigW = "";
    this.bigH = "";
    this.midW = 100;
    this.midH = 100;
    this.smallW = 50;
    this.smallH = 50;
    this.outerW = "";
    this.outerH = "";
    this.deltaX = "";
    this.deltaY = "";
    this.mask = []; //遮罩临时数组，降遮罩层DOM保存这里
    this.imgselect = "";
    _this = this;
    _this.init();
}
avatar.prototype.init = function () {
    _this.zoom = $("<div class='zoom'></div>");
    _this.imgselect = $("<div class='imgareaselect-handle'></div>");
    _this.zoom.append(_this.imgselect);
    $("body").append(_this.zoom);
    //    循环创建遮罩依次保存临时数组，为以后赋值，防止IE6-7性能变差
    for (var i = 0; i < 4; i++) {
        _this.mask[i] = $("<div class='outerimg'></div>")
        $("body").append(_this.mask[i]);
    }

    _this.zoom.mouseenter(function () {
        //_this.zoom.css("cursor","move");
    })
    $(window).bind("resize", _this._resize);
    _this.zoom.bind("mousedown", _this.setMove);
    _this.imgselect.bind("mousedown", _this.setHandle);
    $("body").bind("mouseup", function () {
        $("body").unbind("mousemove");
        _this.zoom.unbind("mousemove");
        _this.zoom.css("cursor", "move");
        $("body").css("cursor", "");

    })
    _this.zoom.bind("mouseup mouseleave", function () {
        $(this).unbind("mousemove");
        //_this.zoom.css("cursor","move");
    })
    //_this._default();
}
avatar.prototype.setHandle = function (e) {
    e.stopPropagation();
    e.preventDefault();
    var _posX = _this.bigImg.offset().left,
		_posY = _this.bigImg.offset().top,
		_starX = e.clientX,
		_starY = e.clientY,
		_starW = _this.zoomWidth,
		_starH = _this.zoomHeight,
		_zoomX = _this.zoom.offset().left,
		_zoomY = _this.zoom.offset().top;
    _this.zoom.css("cursor", "nw-resize");
    $("body").css("cursor", "nw-resize");
    $("body").bind("mousemove", function (e) {
        _this.moveHandle(e, _starX, _starY, _starW, _starH, _zoomX, _zoomY, _posX, _posY);
        _this.setMidImg(_posX, _posY, _zoomX, _zoomY);
    })
}
avatar.prototype.moveHandle = function (e, sX, sY, sW, sH, zX, zY, pX, pY) {
    e.stopPropagation();
    e.preventDefault();
    var _w = (e.clientX - sX) + sW,
		_h = (e.clientY - sY) + sH,
		_bW = _this.bigW + pX,
	 	_bH = _this.bigH + pY,
		_max,
		_zTx = zX + _w,
		_zTy = zY + _h;

    if (_zTx > _bW) {
        _w = _zTx - zX - (_zTx - _bW);
        if (_w < 0) {
            _w = (e.clientX - sX) + sW
        }
        _max = _w;
    }
    if (_zTy > _bH) {
        _h = _zTy - zY - (_zTy - _bH);
        if (_h < 0) {
            _h = (e.clientY - sY) + sH;
        }
        _max = _h;
    }
    _max = Math.min(_w, _h);
    if (_max < 0) {
        _max = 5;
    }

    _this.zoom.css({
        "width": _max - 2,
        "height": _max - 2
    })

    _this.zoomWidth = _this.zoomHeight = _max;
    _this.outerW = _this.bigW - _max;
    _this.outerH = _this.bigH - _max;
    _this.imgselect.css({
        "left": _max - 7,
        "top": _max - 7
    })
    _this.mask[1].css({
        "width": _this.zoomWidth
    })
    _this.mask[2].css({
        "left": zX + _this.zoomWidth,
        "top": pY,
        "width": _this.outerW - (zX - pX),
        "height": _this.bigH
    })
    _this.mask[3].css({
        "top": zY + _this.zoomHeight,
        "width": _this.zoomWidth,
        "height": _this.outerH - (zY - pY)
    })
    _this.midImg.css({
        "width": (_this.bigW * _this.midW) / _this.zoomWidth,
        "height": (_this.bigH * _this.midH) / _this.zoomHeight
    })
    _this.smallImg.css({
        "width": (_this.bigW * _this.smallW) / _this.zoomWidth,
        "height": (_this.bigH * _this.smallH) / _this.zoomHeight
    })
}

avatar.prototype._default = function () {
    _this.bigW = _this.bigImg.width();
    _this.bigH = _this.bigImg.height();
    _this.zoomWidth = 102;
    _this.zoomHeight = 102;
    _this.outerW = _this.bigW - _this.zoomWidth;
    _this.outerH = _this.bigH - _this.zoomHeight;
    var _posX = _this.bigImg.offset().left,
        _posY = _this.bigImg.offset().top,
        _zoomX = (_this.bigW - _this.zoomWidth) / 2 + _posX,
        _zoomY = (_this.bigH - _this.zoomHeight) / 2 + _posY;
    _this.deltaX = _zoomX - _posX;
    _this.deltaY = _zoomY - _posY;
    _this.imgselect.css({
        "left": _this.zoomWidth - 7,
        "top": _this.zoomHeight - 7
    })
    _this.midImg.css({
        "width": (_this.bigW * _this.midW) / _this.zoomWidth,
        "height": (_this.bigH * _this.midH) / _this.zoomHeight
    })
    _this.smallImg.css({
        "width": (_this.bigW * _this.smallW) / _this.zoomWidth,
        "height": (_this.bigH * _this.smallH) / _this.zoomHeight
    })
    _this.zoom.css({
        "left": _zoomX,
        "top": _zoomY,
        "display": "block",
        "width": 102,
        "height":102

    })
    _this.setMask(_posX, _posY, _zoomX, _zoomY);
    _this.setMidImg(_posX, _posY, _zoomX, _zoomY);

}
avatar.prototype.setMidImg = function (x, y, zX, zY) {
    var _mX = Math.round((zX - x) * _this.midW / _this.zoomWidth),
        _mY = Math.round((zY - y) * _this.midH / _this.zoomHeight),
        _sX = Math.round((zX - x) * _this.smallW / _this.zoomWidth),
        _sY = Math.round((zY - y) * _this.smallH / _this.zoomHeight);
    _this.midImg.css({
        "left": -_mX,
        "top": -_mY
    })
    _this.smallImg.css({
        "left": -_sX,
        "top": -_sY
    })
}
avatar.prototype._resize = function () {
    var _posX = _this.bigImg.offset().left,
        _posY = _this.bigImg.offset().top;
    _zoomX = _posX + _this.deltaX;
    _zoomY = _posY + _this.deltaY;
    $(".zoom").css({
        "left": _zoomX,
        "top": _zoomY
    })
    _this.setMask(_posX, _posY, _zoomX, _zoomY);
}
avatar.prototype.setMove = function (e) {
    e.stopPropagation();
    e.preventDefault();
    var _startX = e.clientX,
        _startY = e.clientY,
        _posX = _this.bigImg.offset().left,
        _posY = _this.bigImg.offset().top,
        _delX = _startX - parseInt($(".zoom").css("left")),
        _delY = _startY - parseInt($(".zoom").css("top"));
    //这里是zoom对象，千万不要用document，否则IE6-7会卡死
    _this.zoom.bind("mousemove", function (e) {
        _this.zoomMove(e, _posX, _posY, _delX, _delY);
    });
}
avatar.prototype.zoomMove = function (e, x, y, delX, delY) {
    e.stopPropagation();
    e.preventDefault();
    var _posX = x,
        _posY = y,
        _zoomX = Math.round(e.clientX - delX),
        _zoomY = Math.round(e.clientY - delY),
        _w = _posX + (_this.bigW - _this.zoomWidth),
        _h = _posY + (_this.bigH - _this.zoomHeight);
    if (_zoomX < _posX) {
        _zoomX = _posX;
    } else if (_zoomX > _w) {
        _zoomX = _w;
    }
    if (_zoomY < _posY) {
        _zoomY = _posY;
    } else if (_zoomY > _h) {
        _zoomY = _h;
    }
    _this.deltaX = _zoomX - _posX;
    _this.deltaY = _zoomY - _posY;
    $(".zoom").css({
        "left": _zoomX,
        "top": _zoomY
    })
    _this.setMask(_posX, _posY, _zoomX, _zoomY);
    _this.setMidImg(_posX, _posY, _zoomX, _zoomY);
}
avatar.prototype.setMask = function (x, y, zX, zY) { //参数，大图的位置_posX,_posY
    _this.mask[0].css({
        "position": "absolute",
        "left": x,
        "top": y,
        "width": zX - x,
        "height": _this.bigH
    })
    _this.mask[1].css({
        "position": "absolute",
        "left": zX,
        "top": y,
        "width": _this.zoomWidth,
        "height": zY - y
    })
    _this.mask[2].css({
        "position": "absolute",
        "left": zX + _this.zoomWidth,
        "top": y,
        "width": _this.outerW - (zX - x),
        "height": _this.bigH
    })
    _this.mask[3].css({
        "position": "absolute",
        "left": zX,
        "top": zY + _this.zoomHeight,
        "width": _this.zoomWidth,
        "height": _this.outerH - (zY - y)
    })
}
avatar.prototype.point = function () {
    return { "pointX": _this.deltaX, "pointY": _this.deltaY, "zoomWidth": _this.zoomWidth };
}